<template>
	<div class="container">
		<div class="row">
			<div class="col-md-10">
				<div class="title-bar">
					<div class="title">
						<h3>发布</h3>
					</div>
				</div>
				<div class="col-md-8">
					<div class="form-group input-group-lg">
						<div class="input-group">
							<span class="input-group-addon">标题</span>
							<input type="text" v-model="state.article.title" class="form-control" placeholder="标题">
						</div>
					</div>
					<div class="form-group input-group-lg">
						<div class="input-group">
							<span class="input-group-addon">简介</span>
							<textarea v-model="state.article.description" class="form-control" placeholder="简介" />
						</div>
					</div>
					<div class="form-group input-group-lg">
						<div class="input-group">
							<span class="input-group-addon">内容</span>
							<textarea v-model="state.article.body" class="form-control" placeholder="简介" />
						</div>
					</div>
					<button class="btn btn-success btn-lg" @click="submit">保存</button>
				</div>
			</div>
			<div class="col-md-2">
				<div class="title-bar">
					<div class="title">
						<h3>最近发布</h3>
					</div>
				</div>
				<ul class="list-group">
					<li class="list-group-item" v-for="(item,index) in state.articles" @click="detail(item._id)">
						<span class="badge" v-if="item.read>0">{{item.read}}</span>
						{{item.title}}
					</li>
				</ul>
			</div>
		</div>
		{{userInfo.id}}
	</div>
</template>
<script setup>
	import articleList from '../../components/Article/list.vue'
	import {
		ref,
		reactive,
		toRefs,
		onMounted
	} from 'vue'
	
	import {useRouter} from 'vue-router'
	
	const router = useRouter()
	import {
		CreateArticle,
		GetUserArticle
	} from '../../api/article.js'

	import {
		useUserStore
	} from '../../store/user.js'


	const userStore = useUserStore()

	const {
		userInfo
	} = userStore
	const state = reactive({
		article: ref({
			title: '',
			description: '',
			body: ''
		}),
		articles: ref([])
	})

	onMounted(() => {
		initUserArticle()
	})
	const initUserArticle = () => {
		GetUserArticle({
				sort: 'created',
				page: 1,
				size: 10,
				id: userInfo.id
			})
			.then(({
				code,
				msg,
				data
			}) => {
				console.log(code, data)
				if (code == 200) {
					state.articles = data.articles
				}
			})
	}
	const submit = () => {
		let {
			title,
			description,
			body
		} = state.article
		CreateArticle({
				title,
				description,
				body
			})
			.then(({
				code,
				msg,
				data
			}) => {
				if (code == 200) {
					console.log(msg)
				}
			})
	}

	const detail = (id) => {
		router.push({
			path: '/detail',
			query: {
				id
			}
		})
	}
</script>
<style></style>
